<template>
<div id="editormd">
  <v-md-editor ref="markdownEditor"
               left-toolbar="undo redo | h bold italic strikethrough image code quote ul ol table hr link todo-list
                emoji tip "
               righ-toolbar="preview toc sync-scroll fullscreen"
               :disabled-menus="[]"
               @upload-image="uploadImageHandle"
               v-model="value"
               :height="height"></v-md-editor>
</div>
</template>

<script setup>
import {ref} from "vue";

const markdownEditor = ref()

const props = defineProps({
  value: {
    type: String,
    required: false,
    default: ''
  },
  height: {
    type: String,
    required: false,
    default: '800px'
  }
})

const uploadImageHandle = (event, insertImage, files) => {
  let img = files[0]
  insertImage({
    url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
    desc: '七龙珠',
  })
}

const getMarkdown = () => {
  return markdownEditor.value.text
}

defineExpose({
  getMarkdown
})
</script>

<style scoped>

.editormd-container {
  width: 100%;
  height: 100%;
}
</style>